"use client"

import { useState, useEffect } from "react"

interface TimerProps {
  duration: number
  onTimeout: () => void
}

export default function Timer({ duration, onTimeout }: TimerProps) {
  const [timeLeft, setTimeLeft] = useState(duration)

  useEffect(() => {
    if (timeLeft > 0) {
      const timer = setTimeout(() => setTimeLeft(timeLeft - 0.1), 100)
      return () => clearTimeout(timer)
    } else {
      onTimeout()
    }
  }, [timeLeft, onTimeout])

  const progress = (timeLeft / duration) * 100

  return (
    <div className="w-full max-w-md mx-auto bg-white bg-opacity-20 backdrop-blur-sm rounded-full overflow-hidden">
      <div className="h-2 bg-green-500 transition-all duration-100 ease-linear" style={{ width: `${progress}%` }}></div>
      <p className="text-center mt-2 text-white">{Math.ceil(timeLeft)} seconds left</p>
    </div>
  )
}

